<template>
    <el-dialog :close-on-click-modal="false"
               :modal="false"
               :visible.sync="visible"
               title="选择商品">
        <el-table :data="dataList"
                  @selection-change="selectChangeHandle"
                  border
                  ref="prodTable"
                  style="width: 100%;"
                  v-loading="dataListLoading"
        >
            <el-table-column align="center" header-align="center"
                             v-if="isSingle"
                             width="50">
                <template slot-scope="scope">
                    <div>
                        <el-radio :label="scope.row.prodId"
                                  @change.native="getSelectProdRow(scope.row)"
                                  v-model="singleSelectProdId">&nbsp;
                        </el-radio>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center"
                             header-align="center"
                             type="selection"
                             v-if="!isSingle"
                             width="50">
            </el-table-column>
            <el-table-column align="center"
                             header-align="center"
                             label="产品名称"
                             prop="prodName">
            </el-table-column>
            <el-table-column align="center"
                             label="产品图片"
                             width="140">
                <template slot-scope="scope">
                    <img :src="scope.row.pic"
                         height="100"
                         width="100"/>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :current-page="pageIndex"
                       :page-size="pageSize"
                       :page-sizes="[10, 20, 50, 100]"
                       :total="totalPage"
                       @current-change="currentChangeHandle"
                       @size-change="sizeChangeHandle"
                       layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <span slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button @click="submitProds()"
                 type="primary">确定</el-button>
    </span>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                visible: false,
                dataForm: {
                    product: ''
                },
                singleSelectProdId: 0,
                allData: [],
                selectProds: [],
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false
            }
        },
        props: {
            isSingle: {
                default: false,
                type: Boolean
            }
        },
        activated() {
            this.getDataList()
        },
        methods: {
            // 获取数据列表
            init(selectProds) {
                this.selectProds = selectProds
                this.visible = true
                this.dataListLoading = true
                if (this.selectProds) {
                    this.selectProds.forEach(row => {
                        this.dataListSelections.push(row)
                    })
                }
                this.getDataList()
            },
            getDataList() {
                this.$http({
                    url: this.$http.adornUrl('/prod/prod/page'),
                    method: 'get',
                    params: this.$http.adornParams(
                        Object.assign(
                            {
                                current: this.pageIndex,
                                size: this.pageSize
                            },
                            {
                                prodName: this.dataForm.prodName
                            }
                        )
                    )
                }).then(({data}) => {
                    this.dataList = data.records
                    this.totalPage = data.total
                    this.dataListLoading = false
                    if (this.selectProds) {
                        this.$nextTick(() => {
                            this.selectProds.forEach(row => {
                                let index = this.dataList.findIndex((prodItem) => prodItem.prodId === row.prodId)
                                this.$refs.prodTable.toggleRowSelection(this.dataList[index])
                            })
                        })
                    }
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 单选商品事件
            getSelectProdRow(row) {
                this.dataListSelections = [row]
            },
            // 多选点击事件
            selectChangeHandle(selection) {
                this.dataList.forEach((tableItem) => {
                    let selectedProdIndex = selection.findIndex((selectedProd) => {
                        if (!selectedProd) {
                            return false
                        }
                        return selectedProd.prodId === tableItem.prodId
                    })
                    let dataSelectedProdIndex = this.dataListSelections.findIndex((dataSelectedProd) => dataSelectedProd.prodId === tableItem.prodId)
                    if (selectedProdIndex > -1 && dataSelectedProdIndex === -1) {
                        this.dataListSelections.push(tableItem)
                    } else if (selectedProdIndex === -1 && dataSelectedProdIndex > -1) {
                        this.dataListSelections.splice(dataSelectedProdIndex, 1)
                    }
                })
            },
            // 确定事件
            submitProds() {
                if (!this.dataListSelections.length) {
                    this.$message({
                        message: '请选择商品',
                        type: 'error',
                        duration: 1000,
                        onClose: () => {
                        }
                    })
                    return
                }
                let prods = []
                this.dataListSelections.forEach(item => {
                    let prodIndex = prods.findIndex((prod) => prod.prodId === item.prodId)
                    if (prodIndex === -1) {
                        prods.push({prodId: item.prodId, prodName: item.prodName, pic: item.pic})
                    }
                })
                this.$emit('refreshSelectProds', prods)
                this.dataListSelections = []
                this.visible = false
            }
        }
    }
</script>
